<template>
    <div>
        <div class="title">
            <title-dom :title="$t('account.resetYourPassword')"></title-dom>
        </div>
        <div class="tabs">
            <tabs-dom :tab="tabs"></tabs-dom>
        </div>
        <div class="form-groups">
            <div class="form-group-group">
                <div class="form-group">
                    <div class="ipt-title">
                        <span class="input-title"
                            :style="{ 'font-family': $i18n.locale === 'zh' ? 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei' : 'Helvetica' }">{{
                                $t('account.email')
                            }}</span>
                        <span class="forgotPassword"></span>
                    </div>
                    <my-input type1="text" :value="$t('account.enterEmailAddress')" class="myinput" :rule="rulesEmail"
                        @message="(e) => { form.eamil = e }"></my-input>
                </div>
            </div>
            <div class="form-group">
                <div class="ipt-title">
                    <span class="input-title"
                        :style="{ 'font-family': $i18n.locale === 'zh' ? 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei' : 'Helvetica' }">{{
                            $t('account.verificationCode')
                        }}</span>
                    <span class="forgotPassword"></span>
                </div>
                <code-dom type1="text" type2="email" :value="$t('account.enterCode')" class="myinput" :rule="rulesCode"
                    @message="(e) => { form.code = e }" :mobilePhone="form.eamil"></code-dom>
            </div>
            <div class="form-group">
                <div class="ipt-title">
                    <span class="input-title"
                        :style="{ 'font-family': $i18n.locale === 'zh' ? 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei' : 'Helvetica' }">{{
                            $t('account.newPassword')
                        }}</span>
                    <span class="forgotPassword"></span>
                </div>
                <my-input type1="password" :value="$t('account.passwordRule')" class="myinput" :rule="rulesPassword"
                    :showPassword="true" @message="(e) => { form.pwd = e }"></my-input>
            </div>
            <div class="form-group">
                <div class="ipt-title">
                    <span class="input-title"
                        :style="{ 'font-family': $i18n.locale === 'zh' ? 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei' : 'Helvetica' }">{{
                            $t('account.confirmPassword')
                        }}</span>
                    <span class="forgotPassword"></span>
                </div>
                <my-input type1="password" :value="$t('account.confirmPassword2')" class="myinput" :rule="rulesPassword2"
                    :showPassword="true" @message="(e) => { form.pwdInputAgin = e }"></my-input>
            </div>
        </div>
        <el-button class="register" @click="changePassword">{{ $t('account.resetYourPassword') }}</el-button>
        <p class="login mouse-active" @click="$router.push('/login')">{{ $t('account.backToLogin') }}</p>
    </div>
</template>

<script>
import myInput from '@/components/common/account/components/inputRule.vue';
import checkBox from "@/components/common/account/components/checkBox.vue";
import titleDom from "@/components/common/account/components/title.vue";
import codeDom from "@/components/common/account/components/code.vue";
import tabsDom from "@/components/common/account/components/tabs.vue";
export default {
    components: {
        myInput,
        checkBox,
        titleDom,
        codeDom,
        tabsDom
    },
    data() {
        return {
            form: {
                eamil: "",
                code: "",
                pwd: "",
                pwdInputAgin: ""
            }
        }
    },
    methods: {
        async changePassword() {
            if (this.form.eamil && this.form.code && this.form.pwd && this.form.pwdInputAgin) {
                this.$store.dispatch('emailRegisters', this.form)
            } else {
                this.$toast('请将信息填写完整', 2000, 'normal');
                return;
            }
            this.$store.dispatch('checkUserExists', this.form)
        }
    },
    computed: {
        rulesEmail() {
            return {
                trigger: 'blur',
                num_message: this.$t('account.emailError'),
                required: true,
                req_message: this.$t('account.emailEmpty'),
                reg: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
                reg_message: this.$t('account.emailError')
            }
        },
        rulesCode() {
            return {
                trigger: 'blur',
                min: 1,
                max: 6,
                num_message: this.$t('account.codeError'),
                req_message: this.$t('account.codeEmpty'),
                required: true,
            }
        },
        rulesPassword() {
            return {
                trigger: 'blur',
                min: 6,
                max: 12,
                num_message: this.$t('account.passwordError'),
                req_message: this.$t('account.passwordEmpty'),
                required: true,
                reg: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,12}$/,
                reg_message: this.$t('account.passwordError')
            }
        },
        rulesPassword2() {
            return {
                trigger: 'blur',
                min: 6,
                max: 12,
                num_message: this.$t('account.passwordError'),
                req_message: this.$t('account.passwordEmpty'),
                required: true,
                same: this.form.pwd,
                reg_message: this.$t('account.same')
            }
        },
        tabs() {
            if (this.$i18n.locale === 'zh') {
                return [
                    {
                        name: "通过手机号",
                        to: "/changePassword/zh"
                    },
                    {
                        name: "通过邮箱",
                        to: "/changePassword/en"
                    }
                ]
            } else if (this.$i18n.locale === 'en') {
                return [
                    {
                        name: "Email",
                        to: "/changePassword/en"
                    }
                ]
            }
        }
    }
}
</script>

<style lang="less" scoped>
.title {
    margin-top: 1.6rem;
    margin-bottom: 1.07rem;
}

.tabs {
    margin-bottom: 1.6rem;
}

.form-groups {
    width: 16rem;
    height: 14.08rem;
}


.input-title {
    height: 0.96rem;
    font-size: 0.59rem;
    font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';
    font-weight: normal;
    color: #212121;
    line-height: 0.96rem;
}

.forgotPassword {
    height: 0.96rem;
    font-size: 0.59rem;
    font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';
    font-weight: normal;
    color: #68656C;
    line-height: 0.96rem;
    text-decoration: underline;
}

.ipt-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.form-group {
    margin-bottom: 0.53rem;
}

.register {
    width: 16rem;
    height: 1.92rem;
    background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
    border-radius: 0.21rem;
    backdrop-filter: blur(10px);

    :deep(span) {
        height: 0.96rem;
        font-size: 0.64rem;
        font-family: 'IdeaFonts-DianHei-CEJ, IdeaFonts-DianHei';
        font-weight: normal;
        color: #FFFFFF;
        line-height: 0.96rem;
    }
}

.login {
    height: 0.96rem;
    font-size: 0.59rem;
    font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';
    font-weight: normal;
    color: #7709CC;
    line-height: 0.96rem;
    text-align: center;
    margin-top: 0.53rem;
}
</style>